<template>
	<div @click.stop="onClickHandler" :class="[selected ?'m-row-selected-state' : 'm-row-normal-state']" style="position: relative;">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<van-nav-bar :title="componentModel.title"  @click="onClickHandler" :left-arrow="leftArrowVisible">
		</van-nav-bar>
	</div>
</template>

<script>
	import utils from '@/utils/utils.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignNavBarComponent",
		props: ["componentModel"],
		data() {
			return {
				selected:false,
				"propertySet": [{
					"key": "ID",
					"label": "ID",
					"editor": "label",
				}, {
					"key": "title",
					"label": "标题",
					"editor": "text",
				},{
					"key": "leftArrowClickExpression",
					"label": "左箭头单击事件",
					"editor": "textarea",
				}],
				leftArrowVisible:false
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeMount() {
			if(this.componentModel.title==undefined){
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"title","标题");
			}
			if(this.componentModel.leftArrowClickExpression!=""){
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"leftArrowVisible",true);
			}
		},beforeUnmount() {
			utils.removeArrayElement(this.children,this);
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.mobileComponentClickHandler(this);
			},
			getPropertyValue(propertyKey) {
				if (propertyKey == "ID") {
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}else if(propertyKey=="title"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"title");
				}else if(propertyKey=="leftArrowClickExpression"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"leftArrowClickExpression");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
				if (propertyKey == "title") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"title",propertyValue);
				}else if (propertyKey == "leftArrowClickExpression") {
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"leftArrowClickExpression",propertyValue);
				}
			},
			setSelected(selected) {
				this.selected=selected;
			}
		},
	}
</script>

<style>
	
</style>
